;<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深拷贝和浅拷贝</title>
</head>
<body>
<script>
    //深拷贝和浅拷贝针对引用数据类型 进行数据拷贝 在不影响原始数据的情况下,再复制一份数据出来

    //基本数据类型的变量不涉及深浅拷贝
    let a = 1;
    let b = a;
    b = 3;
    console.log(a);//1
    {
        let obj1 = {
            a: 1,
            b: 2
        };
        let obj2 = obj1;
        obj2.a = 100;
        console.log(obj1.a);//100
    }
    {
        let obj1 = {
            a: 1,
            b: 2,
            //...
        };
        let obj2 = {
            a: 1,
            b: 2
        };
        obj2.a = 100;
        console.log(obj1.a);//1
    }
    {//手动实现简单对象的拷贝
        let obj1 = {
            a: 1,
            b: 2,
            //...
        };
        let obj2 = {};
        for (let key in obj1){
            obj2[key] = obj1[key]
        }
        obj2.a = 100;
        console.log(obj1.a);//1
    }
    {//浅拷贝: 对于复杂综合的数据,只拷贝第一层
        let obj1 = {
            a: 1,
            b: 2,
            c: {
                name: "haha",
                age: 18,
                friend: [
                    {
                        name: "hehe",
                        age: 16,
                    },
                    {
                        name: "heihei",
                        age: 17,
                    }
                ]
            },
            d: [1,2,3,4]
        }
        let obj2 = {};
        // for (let key in obj1){
        //     obj2[key] = obj1[key]
        // }
        // ES6中的ObjectApi来进行浅拷贝
        Object.assign(obj2, obj1)
        obj2.a = 100;
        console.log(obj1.a, obj2);//1
    }
    {//深拷贝: 层层拷贝
        let obj1 = {
            a: 1,
            b: 2,
            c: {
                name: "haha",
                age: 18,
                friend: [
                    {
                        name: "hehe",
                        age: 16,
                    },
                    {
                        name: "heihei",
                        age: 17,
                    }
                ]
            },
            d: [1,2,3,4],
            e: function (){},
            f: undefined,
            g: null
        }
        let obj2 = JSON.parse(JSON.stringify(obj1));
        obj2.c.name = "哈哈";
        console.log(obj2.c.friend.push({
            name: "新增加的",
            age: 0
        }));
        console.log(obj1,obj2);
        //JSON.parse(JSON.stringify(obj1)) 通过JSON方法进行拷贝 不能拷贝值为function和undefined的数据类型
    }
    {//手写代码实现深拷贝 (递归)
        let obj1 = {
            a: 1,
            b: 2,
            c: {
                name: "haha",
                age: 18,
                friend: [
                    {
                        name: "hehe",
                        age: 16,
                    },
                    {
                        name: "heihei",
                        age: 17,
                    }
                ]
            },
            d: [1,2,3,4],
            e: function (){},
            f: undefined,
            g: null
        }

        //手写深拷贝
        function deepClone(obj){
            let newObj = obj instanceof Array?[]: {};

            for (let key in obj){
                //判断当前属性名是否是这个对象的私有属性
                if(!obj.hasOwnProperty(key)) continue;
                    //key = "c"   {...}
                if(typeof obj[key] === "object" && obj[key] !== null){
                    newObj[key] = deepClone(obj[key])
                }else {
                    newObj[key] = obj[key];
                }
            }
            return newObj
        }
        let obj2 = deepClone(obj1);
        obj2.c.friend.push({
            name: "新增加的",
            age: 0
        })
        obj2.c.name = "哈哈";
        console.log(obj1,obj2);



    }
    {//深浅拷贝应用场景
        // home data:{...obj1}
        //comp 1 =>home.data .name = "姓名:" name
        //comp 2 =>home.data .name?
        //comp 3 =>home.data





        //判断当前的属性名是否是这个对象的私有属性
        // if(!obj.hasOwnProperty(key)) continue;
    }

</script>
</body>
</html>